<template>
  <div id="total">
    <list class="list" @loadmore="fetch" loadmoreoffset="10">
      <refresh class="refresh" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
        <text>加载中...</text>
      </refresh>
      <cell class="cell" v-for="item in items" :key="item.id" @click="toDetail(item.id)">
        <div class="panel">
          <text class="text">{{item.name}}</text>
          <text class="text">{{item.percent | percent}}%</text>
          <text class="mark" @click="mark(item.id)">关注</text>
        </div>
      </cell>
    </list>
    <wxc-loading :show="refreshing"></wxc-loading>
  </div>
</template>
<script>
  import { Project } from '../http'
  import { WxcLoading, WxcIcon } from 'weex-ui'
  const modal = weex.requireModule('modal')
  const stream = weex.requireModule('stream')
  const LOADMORE_COUNT = 10
  export default {
    data () {
      return {
        items: [],
        refreshing: false,
        markAry: []
      }
    },
    components: { WxcLoading, WxcIcon },
    filters: {
      percent (v) {
        if (v > 1) v = 1;
        return parseInt( v * 100 )
      }
    },
    created () {
      this.onrefresh()
    },
    methods: {
      fetch () {
        modal.toast({ message: 'loadmore', duration: 1 });
        setTimeout(() => {
          const length = this.lists.length;
          for (let i = length; i < length + LOADMORE_COUNT; ++i) {
            this.lists.push(i + 1)
          }
        }, 800)
      },
      onrefresh () {
        const self = this;
        this.refreshing = true;
        Promise.all([Project.query()]).then(([response]) => {
          self.$set(self.$data, 'items', response.data.items.sort((a, b) => (a.percent - b.percent > 0)));
          self.$store.dispatch('ALL_PROJECT', response.data.items);
          self.markToAry(response.data.items);
          self.$set(self.$data, 'refreshing', false);
        }).catch(() => {
          self.$set(self.$data, 'refreshing', false);
        })
      },
      toDetail (id) {
        this.$router.push('/detail/' + id)
      },
      mark (id) {
        const self = this;
        Promise.resolve(Project.mark(id)).then(response => {
          if (response.data.success) {
            modal.toast({message: '关注成功', duration: 2})
          } else {
            modal.toast({message: '关注失败，请稍后重试', duration: 2})
          }
        }).catch(error => {
          self.refreshing = false;
          modal.toast({message: '关注失败，请稍后重试', duration: 2})
        })
      },
      markToAry (data) {
        const box = {};
        data.map(v => {
          box[v.id] = false
        });
        this.$set(this.$data, 'markAry', box)
      }
    }
  }
</script>
<style>
  #total{
    flex:1;
    width:100%;
  }
  .refresh{
    max-height:50px;
  }
  #total .panel {
    width: 100%;
    height: 50px;
    flex-direction: row;
    justify-content: center;
    align-items:center;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #ddd;
    background-color:#fff;
    /*border-bottom-color: rgb(162, 217, 192);*/
    /*background-color: rgba(162, 217, 192, 0.2);*/
  }
  #total .text {
    font-size: 15px;
    text-align: center;
    color: #41B883;
    flex:1;
  }
  #total .mark{
    background-color: rgb(255,201,0);
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    margin-right: 15px;
    border-radius: 3px;
  }
  .list{
    width:100%;
  }
  .tab-page-wrap{
    flex:1;
  }
</style>